<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css" lang="scss">
			body {
				margin: 0;
				padding: 0;
				background: #fff;
				font-family: "微软雅黑";
				padding-bottom: 60px;
			}

			p {
				margin: 0;
				padding: 0;
			}

			/* 头部 */
			.head {
				background: url(./img/home/bg.png) center no-repeat;
				width: 100%;
				height: 820px;
				overflow: hidden;
				text-align: center;
			}

			.login-register {
				display: flex;
				float: right;
				margin-right: 400px;
			}

			.lr-style {
				color: #fff;
				font-size: 14px;
				margin-top: 20px;
				padding: 0 6px;
			}

			.lr-line {
				border-left: 1px solid #eee;
			}

			.logo-title {
				font-size: 35px;
				font-weight: 600;
				color: #fff;
				margin-top: 60px;
			}

			.navmenu {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 30px;
				margin-bottom: 40px;
			}

			.nav-text {
				font-size: 20px;
				color: #fff;
				font-weight: 500;
				border-left: 2px solid #aaacf7;
				margin-left: 50px;
				padding-left: 50px;
			}

			.nav-text:first-child {
				margin-left: 0;
				border-left: 0;
			}

			.active {
				color: #92c8ff;
				text-decoration: underline;
			}

			/* 搜索 */
			.search {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 60px;
			}

			.demand {
				background: #fffdfe;
				display: flex;
				padding: 0 20px;
				height: 45px;
				line-height: 45px;
				border-right: 1px solid #eee;
			}

			.demand p {
				font-size: 14px;
				color: #767274;
			}

			.el-icon-caret-bottom {
				color: #767274;
				margin-top: 12px;
			}

			.el-input__inner {
				border-radius: 0;
				border: 0;
				width: 400px;
				height: 45px;
				line-height: 45px;
			}

			.bg-style {
				background: #fff;
				height: 45px;
				line-height: 45px;
				color: #6362ca;
				font-size: 16px;
			}

			.bg-search {
				margin-left: 4px;
				padding: 0 30px;
			}

			.and {
				margin: 0 8px;
				font-size: 16px;
				color: #fff;
			}

			.bg-release {
				padding: 0 15px;
			}

			/* 企业关键问题 */
			.issue {
				background: #fff;
				box-shadow: 0px 2px 5px 2px #e7e7e7;
				margin: 0 260px;
				margin-top: -400px;
			}

			.title {
				font-size: 28px;
				font-weight: 700;
				color: #333;
				text-align: center;
				padding: 30px 0;
			}

			.demand-box {
				background: #fff;
				border-radius: 2px;
				border: 1px solid #eeeeee;
				padding: 20px;
				display: flex;
				margin-left: 25px;
			}

			.demand-box:first-child {
				margin-left: 0;
			}

			.block img {
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}

			.details {
				margin-left: 20px;
			}

			.head-box {
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 6px;
			}

			.h-title {
				font-size: 17px;
				font-weight: 500;
				color: #191b1e;
			}

			.bg {
				border: 1px solid #eee;
				border-radius: 3px;
				width: 70px;
				height: 25px;
				line-height: 25px;
				font-size: 14px;
				text-align: center;
				margin-left: 4px;
			}

			.bg-white {
				background: #fff;
				color: #4f565b;
			}

			.bg-blue {
				background: #018af4;
				color: #fff;
			}

			.d-text {
				font-size: 16px;
				color: #8c8d91;
				margin: 14px 0;
			}

			.bg-color {
				font-size: 12px;
				color: #a7a7b1;
				background: #edf1fd;
				border-radius: 2px;
				width: fit-content;
				margin-left: 4px;
				height: 25px;
				line-height: 25px;
			}

			.bg-color:first-child {
				margin-left: 0;
			}

			.wh-small {
				width: 60px;
				text-align: center;
			}

			.wh-max {
				width: 120px;
				padding-left: 20px;
			}

			.footer {
				display: flex;
				margin-top: 15px;
			}

			.ft-span {
				margin-top: 5px;
				font-size: 14px;
				color: #a2a2a2;
				flex: 1;
				margin-left: 16px;
			}

			/* 学校服务 */
			.service-list {
				background: #e9ebea;
				padding: 15px;
				display: grid;
				/*设置三行高度都为100px；*/
				grid-template-rows: 100px 100px 100px;
				/*设置三行宽度都为100px；*/
				grid-template-columns: 370px 370px 370px;
				/* 置网格的行间距、列间距都为3px */
				grid-gap: 15px;
			}

			.service-box {
				background: #fff;
				border-radius: 4px;
				width: 345px;
				height: 270px;
				padding: 0 10px;
			}

			.name-img {
				display: flex;
				padding-top: 20px;
				border-bottom: 1px solid #eee;
				padding-bottom: 10px;
				margin-bottom: 8px;
			}

			.name {
				font-size: 20px;
				font-weight: 500;
				color: #000;
				margin-top: 5px;
				flex: 1;
			}

			.name-img img {
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}

			.tabs {}

			.tab-text {
				font-size: 16px;
				font-weight: 500;
				color: #3767c6;
				background: #f2f2f2;
				border-radius: 2px;
				width: fit-content;
				height: 35px;
				line-height: 35px;
				padding: 0 15px;
				margin-left: 6px;
			}

			.tab-text:first-child {
				margin-left: 0;
			}

			.introduce {
				font-size: 12px;
				color: #b1b5b8;
				margin: 8px 0;
			}

			.bot-tab {
				display: flex;
			}

			/* 政策资讯 */
			.policy {
				background: #f9fafc;
				padding: 10px;
			}

			.policy-list {
				display: flex;
			}

			.policy-box {
				flex: 1;
				margin-left: 10px;
			}

			.policy-box:first-child {
				margin-left: 0;
			}

			.pl-title {
				background: #0053a3;
				padding: 12px 0;
				color: #fff;
				font-size: 18px;
				padding-left: 30px;
			}

			.list-box {
				border-bottom: 1px solid #eee;
				padding-bottom: 4px;
				margin-top: 16px;
				display: flex;
				background: #f2f6f9;
				padding: 0 30px;
			}

			.ns-title {
				font-size: 18px;
				color: #6e6d7f;
				flex: 1;
			}

			.list-num {
				font-size: 14px;
				color: #a0a1a5;
			}

			.buttom {
				border: 1px solid #8fb8d2;
				background: #f3f4f6;
				border-radius: 6px;
				font-size: 16px;
				font-weight: 600;
				letter-spacing: 2px;
				color: #4c7fb3;
				width: 400px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				margin: auto;
				margin-top: 15px;
			}

			/* 一站式解决方案 */
			.solve {
				margin: 30px 200px;
			}

			.solve-title {
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				color: #080808;
			}

			.solve-box {
				margin-top: 30px;
				display: flex;
			}

			.solve-img {
				flex: 1;
			}

			.sl-img {
				display: flex;
			}

			.sl-img2 {
				margin-top: 16px;
			}

			.sl-box {
				background: #018cf5;
				border-radius: 4px;
				width: 245px;
				height: 177px;
				margin-top: 30px;
				margin-left: 20px;
				color: #fff;
			}

			.icon {
				background: #46aaf8;
				border-radius: 3px;
				width: fit-content;
				padding: 6px 8px;
				margin-top: 30px;
				margin-left: 24px;
			}

			.sl-title {
				font-size: 18px;
				margin: 20px 0 6px 24px;
			}

			.sl-text {
				font-size: 14px;
				margin-left: 24px;
			}

			.solve-list {
				margin-top: 15px;
			}

			.list-title {
				font-size: 30px;
				font-weight: 500;
			}

			.item {
				display: flex;
				margin-top: 60px;
			}

			.item-img {
				background: #e5eaff;
				border-radius: 3px;
				width: 45px;
				height: 45px;
			}

			.item-img img {
				padding: 11px;
				width: 21px;
				height: 21px;
			}

			.ft-max {
				font-size: 18px;
				font-weight: 500;
				color: #0f0f0f;
			}

			.ft-small {
				font-size: 14px;
				color: #959595;
				margin-top: 2px;
			}

			.footer {
				background: #0b2136;
				padding: 30px 60px;
				display: flex;
				color: #fff;
			}

			.ft-tabs {
				display: flex;
				font-size: 16px;
				flex: 1;
			}

			.ft-tab {
				margin-left: 25px;
			}

			.ft-tab:first-child {
				margin-left: 0;
			}

			.ft-text {
				font-size: 16px;
				margin-right: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="content">
			<div class="head">
				<div class="login-register">
					<p class="lr-style">登录</p>
					<p class="lr-style lr-line">注册</p>
				</div>

				<div class="logo-title">广西（柳州）汽车产教联合体服务平台</div>

				<div class="navmenu">
					<div v-for="item in nvamenu" :class="{active:index === currentIndex}" @click="currentIndex = index"
						class="nav-text">{{item.name}}</div>
				</div>

				<div class="search">
					<div class="demand">
						<p>需求</p>
						<i class="el-icon-caret-bottom"></i>
					</div>
					<div class="">
						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2">
						</el-input>
					</div>
					<div class="bg-style bg-search">搜索</div>
					<p class="and">或</p>
					<div class="bg-style bg-release">发布需求</div>
				</div>
			</div>
			<!-- 企业关键问题 -->
			<div class="issue">
				<div class="title">企业关键问题</div>
				<div class="demand-list">
					<div style="display: flex;">
						<div class="demand-box">
							<div class="block">
								<img src="./img/miao.webp" alt="">
							</div>
							<div class="details">
								<div class="head-box">
									<div class="h-title">电商类网页开发</div>
									<div style="display: flex;">
										<p class="bg bg-white">
											<i class="el-icon-star-off"></i>
											收藏
										</p>
										<p class="bg bg-blue">揭榜</p>
									</div>
								</div>
								<p class="d-text">熟悉React，TypeScript
									5年以上使用React前端开发经验，了解AWS，阿里云等云服务前端部署，
									有团队合作经验，善于团队成员交流前端</p>
								<div style="display: flex;">
									<p class="bg-color wh-small">需求类型</p>
									<p class="bg-color wh-max">人力资源</p>
								</div>
							</div>
						</div>

						<div class="demand-box">
							<div class="block">
								<img src="./img/miao.webp" alt="">
							</div>
							<div class="details">
								<div class="head-box">
									<div class="h-title">电商类网页开发</div>
									<div style="display: flex;">
										<p class="bg bg-white">
											<i class="el-icon-star-off"></i>
											收藏
										</p>
										<p class="bg bg-blue">揭榜</p>
									</div>
								</div>
								<p class="d-text">熟悉React，TypeScript
									5年以上使用React前端开发经验，了解AWS，阿里云等云服务前端部署，
									有团队合作经验，善于团队成员交流前端</p>
								<div style="display: flex;">
									<p class="bg-color wh-small">需求类型</p>
									<p class="bg-color wh-max">人力资源</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 学校服务 -->
			<div class="service">
				<div class="title">学校服务</div>
				<div class="service-list">
					<div class="service-box">
						<div class="name-img">
							<p class="name">柳州职业技术学院</p>
							<img src="./img/miao.webp" alt="">
						</div>
						<div class="tabs">
							<p class="tab-text">平台</p>
						</div>
						<div class="introduce">
							硕士学历，数学专业，研究方向是最优化，目前就职于人工智能企业，
							是算法工程师，主要从事深度学习，视觉，人工智能相关的工作，3年工作经验。
							有丰富的模型搭建及部署经验，成功落地多个项目。以前做过软件开发，
							对前端后端软件开发也能时仟，希望承接算法相关的项目，自动化智能化
						</div>
						<div class="bot-tab">
							<p class="tab-text" style="font-size: 14px;">立即联系</p>
							<div class="bg bg-white">
								<i class="el-icon-star-off"></i>
								<span class="">收藏</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 政策资讯 -->
			<div class="policy">
				<div class="title">政策资讯</div>
				<div class="policy-list">
					<div class="policy-box">
						<div class="pl-title">国家政策</div>
						<div style="background: #f2f6f9;">
							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>
						</div>
					</div>

					<div class="policy-box">
						<div class="pl-title">省级政策</div>
						<div style="background: #f2f6f9;">
							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>

							<div class="list-box">
								<p class="ns-title">教育部等十部门关于做好2023年职业教育活动周相关工作的通知</p>
								<div style="display: flex;">
									<i class="el-icon-time" style="color: #a0a1a5;"></i>
									<p class="list-num">2023-04-23</p>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="buttom">
					查看更多
				</div>
			</div>
			<!-- 一站式解决方案 -->
			<div class="solve">
				<div class="solve-title">因为专业，所以关注，一站式解决方案</div>
				<div class="solve-box">
					<div class="solve-img">
						<div class="sl-img">
							<div>
								<img src="./img/solve1.jpg" alt="">
							</div>
							<div style="margin-top: 16px;margin-left: 16px;">
								<img src="./img/solve2.jpg" alt="">
							</div>
						</div>
						<div class="sl-img">
							<div>
								<img src="./img/solve3.jpg" alt="">
							</div>
							<div class="sl-box">
								<div class="icon">
									<i class="el-icon-check" size="18"></i>
								</div>
								<div class="sl-title">需求提醒</div>
								<div class="sl-text">本周有104个新工作机会</div>
							</div>
						</div>
					</div>

					<div class="solve-list">
						<div class="list-title">帮您得到最合适的解决方案</div>
						<div class="">
							<div class="item" v-for="item in solve">
								<div class="item-img">
									<img :src="item.img" alt="">
								</div>
								<div style="margin-left: 15px;">
									<p class="ft-max">{{item.title}}</p>
									<p class="ft-small">{{item.text}}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div class="ft-tabs">
					<p class="ft-tab">需求大厅</p>
					<p class="ft-tab">人才市场</p>
					<p class="ft-tab">项目作品</p>
					<p class="ft-tab">发布需求</p>
				</div>
				<div class="ft-text">
					<span>@2024</span>
					<span>广西（柳州）汽车产教联合体服务平台</span>
				</div>
			</div>
		</div>
	</body>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				currentIndex: 0,
				nvamenu: [{
					name: '首页'
				}, {
					name: '政策资讯'
				}, {
					name: '产业资源'
				}, {
					name: '教育资源'
				}, {
					name: '关于我们'
				}],
				solve: [{
					img: 'img/shangchuan.jpg',
					title: '上传揭榜能力',
					text: '确保清晰、简洁，突出您的技能和成就，教育背景和工作经历'
				}, {
					img: 'img/fabu.jpg',
					title: '发布信息需求',
					text: '确保清晰、简洁，突出您的技能和成就，教育背景和工作经历'
				}, {
					img: 'img/hezuo.jpg',
					title: '确定合作意向',
					text: '确保清晰、简洁，突出您的技能和成就，教育背景和工作经历'
				}, {
					img: 'img/hezuo.jpg',
					title: '签约开启工作',
					text: '确保清晰、简洁，突出您的技能和成就，教育背景和工作经历'
				}],
			}
		})
	</script>
</html>